@import '~@/common/common.styl';
.list_public{
  margin-top: rem(15)
  padding: 0 rem(30)
  color: #222
  overflow: hidden
  .lp_box{
    position: relative
    border-radius: rem(10)
    background-color: #fff
    padding: rem(20) 0
    margin-bottom: rem(14)
    .rank_num{
      position: absolute
      left: rem(8)
      top: rem(8)
      display: inline-block
      width: rem(36)
      padding-top: rem(8)
      line-height: rem(27)
      text-align: center
      font-size: rem(28)
      font-style: normal
      font-family: DINPro-Medium;
      color: #666666
      bgp('~@/assets/two/fire.png')
      z-index 9
    }
    .ordinary_num{
      position: absolute
      left: rem(8)
      top: rem(8)
      display: inline-block
      text-align: center
      font-size: rem(28)
      font-style: normal
      line-height: rem(30)
      padding: rem(6) rem(10) 0
      font-family: DINPro-Medium;
      border-radius: rem(18)
      color: #666666
      background-color: #f1f1f1
      z-index 11
    }
    &:nth-child(1){
      .rank_num{
        bgp('~@/assets/two/one.png')
        color: #1779ff
      }
    }
    &:nth-child(2){
      .rank_num{
        bgp('~@/assets/two/two.png')
        color: #fd7f2c
      }
    }
    &:nth-child(3){
      .rank_num{
        bgp('~@/assets/two/three.png')
        color: #09d2a0
      }
    }
  }
  .lp_header{
    position: relative
    display: flex
    align-items: center
    padding: 0 rem(20)
    .lp_head{
      box-sizing: border-box
      width: rem(100)
      height: rem(100)
      flex-shrink: 0
      border: 1px solid #e5e5e5
      border-radius: 50%
      overflow: hidden
      // background-color: #ff7500
      &.no_border{
        border: none
      }
      img{
        display: block
        width: 100%
        height: 100%
        object-fit: cover
      }
      .text_head{
        width: 100%;
        height: 100%;
        color: #ffa500;
        background-color: #fff1e8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-size: 0.54rem;
        cursor: pointer;
      }
    }
    .lp_cover_box{  //圆角封面样式
      position: relative
      width: rem(100)
      height: rem(100)
      flex-shrink: 0
      .lp_cover{
        position relative
        width: rem(100)
        height: rem(100)
        border-radius: rem(20)
        overflow: hidden
        // background-color: #ff7500
        z-index: 1
        img{
          display: block
          width: 100%
          height: 100%
          object-fit: cover
        }
      }
      &.music_bg{
        margin-right: rem(20)
        &:before{
          position absolute
          top: 50%;
          right: rem(-15);
          transform: translate(0, -50%);
          content: ''
          display: inline-block
          width: rem(76)
          height: rem(76)
          bgp('~@/assets/img/music_bg.png')
        }
      }
      &.head_video{
        &:before{
          position: absolute
          top: 50%
          left: 50%
          transform: translate(-50%,-50%)
          content: ''
          display: inline-block
          width: rem(44)
          height: rem(44)
          bgp('~@/assets/img/play_s.png')
          z-index 2
        }
      }
    }
    .lp_title{   //卡片 - 标题样式支持图片
      box-sizing: border-box
      width: rem(530)
      padding-left: rem(20)
      .lp_title_item{
        font-size: 0
        display: flex
        align-items: center
        img{
          vertical-align: middle
          flex-shrink: 0
        }
        .shopcart_img{
          width: rem(33)
          height: rem(28)
          margin-right: rem(10)
        }
        .redbag_img{
          width: rem(23)
          height: rem(28)
          margin-right: rem(10)
        }
        span{
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          vertical-align: middle
          font-size: rem(30)
        }
      }
      .lp_text{ //卡片 - 标题下面纯文字
        font-size: rem(24)
        margin-top: rem(8)
        color: #888
      }
      .lp_label_box{ //卡片 - 标题下面纯文字
        display: flex
        align-items: center
        font-size: 0
        margin-top: rem(10)
        i{
          font-size: rem(22)
          font-style: normal
          color: #555
          background-color: #fff7ed
          border-radius: rem(4)
          margin-right: rem(10)
          line-height: rem(36)
          padding: 0 rem(10)
        }
      }
      .lp_user{ //卡片 - 标题下面带用户头像
        display: flex
        align-items: center
        margin-top: rem(8)
        .lp_item_head{
          width: rem(38)
          height: rem(38)
          border-radius: 50%
          margin-right: rem(10)
          // background-color: #1779ff
          overflow: hidden
          flex-shrink: 0
          img{
            display: block
            width: 100%
            height: 100%
            object-fit: cover
          }
        }
        p{
          flex: 1
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          font-size: rem(24)
          color: #888
          span{
            margin-right: rem(10)
          }
        }
      }
      .lp_price_box{ //卡片 - 标题下面价格
        margin-top: rem(10)
        color: #fd7f2c
        font-family: Dinpro-medium
        font-size: 0
        span{
          font-size: rem(26)
        }
        strong{
          font-size: rem(36)
          font-weight: normal
        }
      }
    }
  }
  .lp_footer{ //
    display: flex
    justify-content: space-around
    margin-top: rem(22)
    .lpf_item{
      flex: 1
      text-align: center
      strong{
        display: block
        font-size: rem(30)
        font-weight: normal
        font-family: Dinpro-medium;
      }
      span{
        display: block
        margin-top: rem(4)
        font-size: rem(24)
        color: #888
      }
    }
  }
}